<template>
    <div>

        <!-- 筛选查询 -->
        <div class="list">
            <div>
                <img class="list-img" src="../../../assets/images/搜索小.png" alt="">
            </div>
            <div>
                筛选查询
            </div>
        </div>
        <div class="search">
            <div class="search">

                <div style="display: flex;">
                    <div class="whead">
                        <div style="display: flex; ">
                            <div style="width: 100px;">操作人员:</div>
                            <el-select v-model="types" placeholder="全部" @change="typesChange(types)">
                                <el-option v-for="item in Type" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>

                    </div>

                    <div class="whead" style="margin-left: 20px;">
                        <div>操作日期:</div>
                        <el-select v-model="staty" placeholder="全部" @change="statusChange(staty)">
                            <!-- <el-option v-for="item in statu" :key="item.id" :label="item.name" :value="item.id">
                            </el-option> -->
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <!-- 数据列表 -->
        <div class="lists">
            <div class="list">
                <div>
                    <img class="list-img" src="../../../assets/images/查询数据列表.png" alt="">
                </div>
                <div>
                    数据列表
                </div>
            </div>

        </div>
        <div>
            <!-- 表格 -->
            <el-table border :data="listData" style="width: 100%" align="center">
                <el-table-column prop="accountId" label="编号" align="center"></el-table-column>
                <el-table-column prop="accountName" label="操作者" align="center"></el-table-column>
                <el-table-column prop="updateTime" label="操作日期" align="center"></el-table-column>
                <el-table-column prop="ipAddress" label="IP地址" align="center"></el-table-column>
                <el-table-column prop="" label="操作记录" align="center"></el-table-column>
            </el-table>
      
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px; ">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>

</template>
 
<script>

// import CommonTable from "@/components/Table/index.vue";
import { loginRecordPage,  } from '@/api/user'
import { Toast } from 'vant';
export default {
    data() {

        return {
            dialogVisible: false,
            input: '', //搜索
            fishName: '', //鱼苗名称搜索
            principal: '', //负责人搜索
            city: '', //城市搜索
            staty: '', //水库状态
            loading: false,
            types:'',
            selectedAssetsList: [], // 该数组对象
            assetsUidList: [], // 下标值
            currentPage: -1, //当前页数
            pageSize: 10, //每页条数
            total: 0, //总条目数
            listData: [],
            form: {
                name: '',
                userName: '',
                email: '',
                logPassword: '',
                verifyPassword: '',
                describe: '',
                accounts: '',

            },
            Type:[],
            statu:[],
        }
    },
    created() {
        this.loginRecordPage(this.pageSize, this.currentPage)
    },
    methods: {


        //   成员分页
        async loginRecordPage(limit, page) {
            let params = {
                limit: this.pageSize,
                page: this.currentPage,
            }
            let result = await loginRecordPage(params)
            console.log(result);
            if (result.code == 0) {
                this.listData = result.data.records
                this.pageSize = result.data.limit
                this.total = result.data.total
            }
        },
    
      
     
      

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.loginRecordPage(this.pageSize, this.currentPage)
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loginRecordPage(this.pageSize, this.currentPage)
        },
        //  输入搜索
        btnchange(e) {
            this.searchContent = e
            this.loginRecordPage(this.pageSize, this.currentPage)
        },
        // 输入搜索
        typesChange(e) {
            this.types = e
        },
        accountChange(e) {
            console.log('11', e);
            this.departmentIds = e
        },
        // 所属部门
        statusChange(e) {
            this.departmentId = e
            this.loginRecordPage(this.pageSize, this.currentPage)
        },
        search() {

        },
        // 跳转到添加水库页面
        addEvent() {
            // this.$router.push('addReservoir')
        }
    }

};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
    padding: 10px 20px 20px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::v-deep .search[data-v-1c1a5e1d] {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 80px;
    margin: 0 20px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px 10px 10px 90px;
    height: 92px;
    width: 100px;
}

::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    text-align: center;
}

.list {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;

    .list-img {
        width: 20px;
        height: 20px;
    }
}

.lists {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;


}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c !important;
    color: #FFF;
}

.search {
    // display: flex;
    align-items: center;
    // height: 80px;
    line-height: 80px;
    margin: 0 20px;

}

.whead {
    width: 400px;
    display: -webkit-box;
}


</style>